<template>
    <div>
        <el-button  style="margin-top: 30px; margin-bottom: 30px" type="primary" icon="el-icon-plus" @click="open_t">新增培训</el-button>
        <el-dialog
                title="新增培训"
                :visible.sync="dialogVisible_2"
                width="50%"
        >
            <div>
                <div>
                    <span>培训名称：</span>
                    <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit" v-model="train.name"
                              placeholder="请输入培训名称"></el-input>
                </div>

                <div style="margin-top: 20px">
                    <span>培训对象：</span>
                    <el-form>
                        <el-form-item label="所属部门:" prop="departmentId">
                            <el-popover
                                    placement="right"
                                    title="请选择部门"
                                    width="200"
                                    trigger="manual"
                                    v-model="popVisible">
                                <el-tree default-expand-all :data="allDeps" :props="defaultProps"
                                         @node-click="handleNodeClick"></el-tree>
                                <div slot="reference"
                                     style="width: 150px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box"
                                     @click="showDepView">{{inputDepName}}
                                </div>
                            </el-popover>
                        </el-form-item>
                    </el-form>
                </div>
                <div style="margin-top: 20px">
                    <span>培训内容：</span>
                    <el-input size="mini" style="width: 450px" prefix-icon="el-icon-edit" v-model="train.content"
                              placeholder="请输入培训内容"></el-input>
                </div>

                <div style="margin-top: 20px">
                    <span>培训时间：</span>
                    <el-date-picker
                            v-model="train.train_time"
                            type="datetime"
                            value-format='yyyy-MM-dd HH:mm'
                            placeholder="选择日期时间">
                    </el-date-picker>
                </div>
                <div style="margin-top: 20px">
                    <span>培训地点：</span>
                    <el-input size="mini" style="width: 250px" prefix-icon="el-icon-edit" v-model="train.train_location"
                              placeholder="请输入培训地点"></el-input>
                </div>
                <div style="margin-top: 20px">
                    <span>培训要求：</span>
                    <el-input size="mini" style="width: 450px" prefix-icon="el-icon-edit" v-model="train.requirement"
                              placeholder="请输入培训要求"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible_2 = false">取 消</el-button>
    <el-button type="primary" @click="doAddTrain">发起审核</el-button>
  </span>
        </el-dialog>


        <el-tabs v-model="activeName" type="card" >
            <el-tab-pane label="未审核" name="depmana"><train_not></train_not></el-tab-pane>
            <el-tab-pane label="已通过" name="ecmana"><train_past></train_past></el-tab-pane>
            <el-tab-pane label="不通过" name="posmana"><Train_notPast></Train_notPast></el-tab-pane>
        </el-tabs>




    </div>
</template>

<script>
    import Train_not from "./component/train_not";
    import Train_past from "./component/train_past";
    import Train_notPast from "./component/train_notPast";
    export default {
        components: {Train_notPast, Train_past, Train_not},
        methods: {


            showDepView(){
                this.popVisible = !this.popVisible
            },

            handleNodeClick(data){
                this.inputDepName = data.name;
                this.train.trainee = data.id;
                this.popVisible = !this.popVisible
            },



            initDep(){
                this.getRequest('/employee/basic/deps').then(resp => {
                    if (resp) {
                        this.allDeps = resp;
                    }
                })
            },
            doAddTrain(){
                this.postRequest('/train/',this.train).then(resp=>{
                    console.log(resp)
                })
                this.dialogVisible_2=false;

            },


            open_t(){
                this.dialogVisible_2=true;
                console.log(this.dialogVisible)
            }
        },
        mounted(){

            this.initDep();
        },

        data() {
            return {
                activeName:'depmana',
                inputDepName: '所属部门',
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                reason:'',
                drawer: false,
                popVisible:false,
                allDeps:[],

                tableData_0:[],
                tableData_1:[],
                tableData_2: [],
                train:{
                    department:{}
                },
                dialogVisible_1: false,
                dialogVisible_2: false,
            }
        }
    }
</script>
<style scoped>
    .per_basic{
        font-weight: 800;

    }
</style>
